<template>
  <div class="container" @click="pageClick($event)" id="container">
    <!--浮动菜单-->
    <float-menu class="float-menu" />

    <!--  搜索框    -->
    <search class="search" />
    <!--设置面板-->
    <transition
      enter-active-class="animate__animated animate__bounceInLeft"
      leave-active-class="animate__animated animate__bounceOutRight"
    >
      <settings class="settings" v-if="settingsActive" id="panel" />
    </transition>

    <!--设置按钮-->
    <svg-icon
      class="settings-icon"
      :size="displayMenu.get('icon').size"
      :color="displayMenu.get('icon').color"
      name="settings"
      @click="() => (settingsActive = !settingsActive)"
    />
  </div>
</template>

<script lang="ts" setup>
import FloatMenu from '@/components/home/FloatMenu.vue'
import Settings from '@/views/home/Settings.vue'
import { provide, reactive, ref } from 'vue'
import type { DisplayMenu } from '@/components/home/type/DisplayMenu'
import search from '@/views/home/Search.vue'
import Search from '@/views/home/Search.vue'
let settingsActive = ref(false)

const displayMenu = reactive<Map<String, DisplayMenu>>(
  new Map<string, DisplayMenu>(),
)
displayMenu.set('icon', {
  id: '1',
  name: 'icon',
  active: true,
  size: '30',
  color: '#fff',
})
displayMenu.set('text', {
  id: '2',
  name: 'text',
  active: false,
  size: '14px',
  color: '#fff',
})
provide('displayMenu', displayMenu)
let showSearchType = ref(false)
provide('showSearchType', showSearchType)
const pageClick = (e) => {
  if (e.target.id == 'container') {
    settingsActive.value = false
    showSearchType.value = false
  }
}
</script>

<style scoped lang="less">
.container {
  position: relative;
  height: 100vh;
  width: 100vw;
  overflow: hidden;

  .float-menu {
    position: absolute;
    width: max-content;
    height: 50vh;
    top: 25vh;
  }

  .search {
    position: absolute;
    left: 40vw;
    top: 10vh;
    width: 200px;
    height: max-content;
  }

  .settings-icon {
    position: absolute;
    bottom: @marginBottom;
    left: @marginLeft;
  }

  .settings-icon:hover {
    cursor: pointer;
  }

  .settings {
    position: absolute;
    bottom: calc(10px + 20px);
    left: 20px;
    width: 250px;
    height: 200px;
    border-radius: 6px;
  }
}
</style>
